<template>
    <div class="zy-content">
        <div class="searchBox search-box-layout">
            <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="handleAdd">
                    新增
                </Button>
            </div>
            <div class="tableContent" :style="{ height: tableHeight + 'px' }">
                <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="handleEditRow(row,'process')"><i
                                class="iconfont zy-common-bianji"></i>工艺路线配置</span>
                        <span class="operationBtn" @click="handleEditRow(row)"><i
                                class="iconfont zy-common-bianji"></i>编辑</span>
                        <span class="operationBtn" @click="handleDeleteRow(row)"><i
                                class="iconfont zy-common-shanchu"></i>删除</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" />
                <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"
                    @on-page-size-change="changePageSize" show-sizer />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.sureDelete') }}</span>
            </p>
            <div slot="footer">

                <Button type="default" @click="deleteShow = false">取消</Button>
                <Button type="primary" @click="handleDeleteSure">确定</Button>
            </div>
        </Modal>


        <CreateOrUpdateModal :visible="createStatus" :form="form" :title="form.id ? '编辑' : '新增'"
            @update:visible="createStatus = $event"
            :dicData="dicData"
            :handleAddSubmit="handleAddSubmit" :materialList="materialList" />
        <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
            @importExcelChange="importExcelChange">
        </importExcelModal>
        <DrawerProcess 
        :drawerVisible="drawerVisible"
        :drawerClose="drawerClose"
        :currentItem="currentItem"
        :processList="processList"
        :processTotal="processTotal"
        :productProcess="productProcess"
        />
    </div>
</template>

<script>
import ImportExcelModal from '@/components/importExcel.vue';
import DrawerProcess from "./drawerProcess";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import CreateOrUpdateModal from './modal_open.vue';
import { productAllApi, editApi, addApi, deleteApi, productApi , productProcedureApi} from '@/api/dataBasic/processRoute'
export default {
    name: "list.vue",
    components: { ImportExcelModal, search, CreateOrUpdateModal,DrawerProcess },
    mixins: [toggleTableOperation],
    data() {
        return {
            params: {
                pageSize: 20,
                current: 1
            },
            searchData: [
                {
                    title: "工艺路线名称",
                    key: "processName",

                },
                {
                    title: "产品名称",
                    key: "productId"
                },


            ],
            columns: [
                {
                    title: '工艺路线名称',
                    key: 'processName',
                    align: 'center',

                    resizable: true
                },
                {
                    title: '产品名称',
                    key: 'productId',
                    align: 'center',

                    render: (h, params) => {
                        const name = this.materialList.find(i => i.id === params.row.productId)
                        return h('div', name.productName);
                    }
                }, {
                    title: '是否发布',
                    key: 'processPublished',
                    align: 'center',
                    render: (h, params) => {
                        let statusText = '';
                        if (params.row.processPublished === true) {
                            statusText = '是';
                        } else if (params.row.processPublished === false) {
                            statusText = '否';
                        }
                        return h('div', statusText);

                    }
                },
                {
                    title: "操作",
                    slot: "action",
                    fixed: "right",
                    width: 330,
                    align: "center"
                }
            ],
            importExcelState: false,
            list: [],
            total: 0,
            processTotal:0,
            deleteShow: false,
            currentItem: {},
            createStatus: false,
            form: {},
            nameList: [],
            searchParams: {},
            materialList: [],
            dicData: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
            ],
            drawerVisible:false,
            processList: [],
        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 400;
        }
    },

    mounted() {
        this.getList(),
            this.relevance()
    },
    methods: {
           drawerClose(){
            this.drawerVisible=false
           },
        relevance() {
            productAllApi().then(res => {
                if (res.code === 200) {
                    this.materialList = res.data;
                }
            })
        },
        getSearch(arg) {
            this.searchParams = arg[0] || {};
            this.getList();
        },

        importExcelChange(val) {
            this.importExcelState = false;
            if (val === 'success') {
                this.$Message.success('导入成功!');
                this.changeNum();
            }
        },
        async getList() {
            try {
                const response = await productApi({ ...this.params, ...this.searchParams })
                if (response.code === 200) {
                    this.list = response.data.records;
                    this.total = response.data.total;
                } else {
                    this.$Message.warning(response.msg);
                }
            } catch (error) {
                console.error(error);
                this.$Message.error('获取列表失败');
            }
        },
        reset() {
            this.params = { pageSize: 20, current: 1 };
            this.getList();
        },
        changeNum() {
            this.params.current = 1;
            this.params.pageSize = 20;
            this.getList();
        },
        handleAdd() {
            this.form = {};
            this.createStatus = true;
        },

        handleImportData() {
            this.importExcelState = true;
        },
        handleAddSubmit() {
            const url = this.form.id ? editApi : addApi;
            url(this.form).then(res => {

                this.currentItem = {};
                this.createStatus = false;
                this.getList();
            })
                .catch(error => {
                    console.error('Error submitting form:', error);

                });

        },
        handleEditRow(row,type) {
           
            if(type==='process'){
                // this.productProcess({  
                //     processRouteId:row.id,
                //     current: 1,pageSize:10,})
                // this.currentItem=row
                // this.drawerVisible = true;
                const query={processRouteId:row.id}
                this.$router.push({
        path:'/dataBasic/process', query ,
       
      })
            }else{
                this.form = { ...row , processPublished: row.processPublished ? 1 : 0,};
                this.createStatus = true;
            }
         
        },
        productProcess(query){
            productProcedureApi(query).then(res=>{
                this.processList=res.data.records;
                this.processTotal=res.data.total;
                })
        },

        handleDeleteRow(row) {
            this.currentItem = row;
            this.deleteShow = true;
        },
        handleDeleteSure() {

            deleteApi({ids:[this.currentItem.id]}).then(res => {
                if (res.code === 200) {

                    this.currentItem = {};
                    this.deleteShow = false;
                    this.getList();
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        changePageNum(val) {
            this.params.current = val;
            this.getList();
        },
        changePageSize(val) {
            this.params.pageSize = val;
            this.getList();
        }
    }
}
</script>

<style scoped>
.tableContent {}
</style>
